<template>
	<view class="wrap" >
		<!--轮播图-->
		<u-swiper :list="list" name="imgPath" mode="dot" duration="3000" :circular="false" :effect3d="true"></u-swiper>
		<u-line color="black" />
		<view class="title">推荐好物</view>
		<u-tabs name="cate_name" count="cate_count" :list="tablist" :is-scroll="false" :current="current"
			@change="change">
		</u-tabs>
		<waterpull ref="child" :categoryId="categoryId"></waterpull>

		<u-back-top :scroll-top="scrollTop" top="450"></u-back-top>
	</view>
</template>

<script>
	import axios from "axios";
	import waterpull from '../../pages/index/waterPull/waterpull';
	export default {
		components: {
			waterpull,
		},
		data() {
			return {
				list: [],
				tablist: [{
					cate_name: '手机'
				}, {
					cate_name: '电视机'
				}, {
					cate_name: '充电器',
				}],
				current: 0,
				categoryId: 1,
				scrollTop: 0
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReady() {
			this.getRotation();
			this.$refs.child.getshopWaterpullOne();
		},
		methods: {
			getRotation() {
				//轮播图
				var _this = this;
				var url = 'http://localhost:3001/'
				axios.get("/api/shop/shopSwiper").then(function(res) {
					let arr = res.data
					if (Array.isArray(arr)) {
						arr.forEach(item => {
							item.imgPath = `${url}${item.imgPath}`
						})
						_this.list = arr
					}
				})
			},
			change(index) {
				this.current = index;
				if (index == 0) {
					this.$refs.child.getshopWaterpullOne();
				}
				if (index == 1) {
					this.$refs.child.getshopWaterpullTwo();
				}
				if (index == 2) {
					this.$refs.child.getshopWaterpullThree();

				}
			}
		}

	};
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(240, 240, 240);
	}
</style>

<style lang="scss" scoped>
	.title {
		font-size: medium;
		font-weight: bolder;
		margin-top: 6px;
	}
</style>
